<!-- StudyPlanSelectSinglePeople_Frame.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>人员列表</title>
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" href="../../css/weui.min.css">
		<link rel="stylesheet" href="../../css/mui.min.css"/>
		<link rel="stylesheet" href="../../css/base.css"/>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<style type="text/css">
			.mui-table-view{
				margin-left: 0;
			}
			.mui-table-view-cell>a:not(.mui-btn){
				padding: 10px;
			}
			.mui-table-view-cell>a:not(.mui-btn) .course-img{
				display:block;
				width: 136px;
				max-width: 136px;
				height: 84px;
				background-image: url(../../image/course_placehoder.png);
				background-size: 136px 84px;
			}
			.mui-table-view-cell .top-content{
				height: 40px;
			}
			.mui-table-view-cell .bottom-content{
				/*padding-top: 16px;*/
				height: 44px;
			}
			.mui-table-view-cell>a:not(.mui-btn) .course_title{
				overflow: hidden;
			 	text-overflow: ellipsis;
			 	white-space: pre-wrap;
			 	display: -webkit-box;
			 	-webkit-line-clamp: 2;
			 	-webkit-box-orient: vertical;
			 	font-size: 14px;
			 	color: #222;
			 	line-height: 20px;
			}
			.mui-table-view-cell>a:not(.mui-btn) .subtitle{
				color: #999;
				font-size: 12px;
				overflow: hidden;
				white-space: normal;
			 	text-overflow: ellipsis;
			 	line-height: 14px;
			}
			/*.subtitle .right-span{
				margin-left: 10px;
			}*/
			.subtitle-red{
				color: #e10d20;
				font-size: 12px;
				margin: 0;
			}
			.cell-btn{
				font-size: 12px;
			    font-weight: 400;
			    line-height: 1.2;
			    padding: 4px 6px;
			    border-color: #1da4e8;
			    background-color: #1da4e8;
			    color: white;
			    width: 70px;
			}	
			.cell-btn:enabled:active{
				background-color: #2db4f8;
			}
			.bottom-content .cell-content-left{
				padding-right: 68px;
				float: left;
			}
			.bottom-content .cell-content-right{
				padding-top: 10px;
				width: 68px;
				height: 42px;
				float: right;
				position: absolute;
				right: 10px; 
				top: 50px;
			}
			.button-super-div{
				padding: 2px 0;
			}
			.course-status-tag{
				position: absolute;
				bottom: 10px;
				left: 10px;
				font-size: 12px;
				color: white;
				padding: 2px 4px;
				line-height: 1em;
				width: 136px;
				background-color: rgba(0,0,0,0.5);
				text-align: center;
			}
			.course-status-tag-red{
				background-color: #EC1A2B;
			}
			.course-status-tag-green{
				background-color: #1DBF53;
			}
			.tag-img{
				width: 12px;
				height: 12px;
				margin-right: 4px;
			}
			.cell-btn{
				margin-right: 10px;
			}
			.info-span{
				margin-left: 10px;
			}
			.mui-table-view .mui-media-object.mui-pull-left{
				margin-right: 12px;
			}
			.top-p{
				margin-top: 4px;
			}
			.bottom-p{
				margin-top: 6px;
			}
			.mui-table-view-cell{
				padding: 10px;
			}
			.mui-table-view-cell.mui-checkbox.mui-left, .mui-table-view-cell.mui-radio.mui-left{
				padding-left: 46px;
			}
			.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{
			    position: absolute;
			    left: -10px;
			}
			.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{
				color: #18b4ed;
			}
			.add-btn{
				color: white;
				background-color: #ff9900;
				border-color: #ff9900;
				margin-top: 10px;
			}
			.add-btn:enabled:active{
				background-color: #ff9900;
				border-color: #ff9900;
			}
			.base_icon{
				width: 20px;
				margin-top: 12px;
			}
			.bottom-div{
				height: 40px;
				width: 100%;
				position: fixed;
				bottom: 0;
				left: 0;
			}
			.bottom-checkbox input[type=checkbox]:before{
			    position: absolute;
			    top: 0;
			    left: -10px;
			}
			.bottom-left-div{
				margin-right: 100px;
				line-height: 24px;
				font-size: 14px;
				color: #222;
			}
			.bottom-right-div{
				width: 100px;
				float: right;
				font-size: 16px;
				background-color: #ff9900;
				text-align: center;
				line-height: 40px;
				color: white;
			}
			.base_navigation_bar,#BarAppearance {
				z-index: 1;
			}
			.mui-table-view-cell.mui-checkbox.hide-checkbox{
				padding-left: 10px;
			}
			.hide-checkbox input[type=checkbox]:before{
				display: none;
			}
			.mui-table-view-cell>a:not(.mui-btn){
				margin: -10px;
			}
			.blank-div{
				width: 100%;
				height: 40px;
			}
			.bottom-subtitle{
				color: #18b4ed;
			}
			.user-name{
				color: #666;
			}
		</style>
	</head>
	<body>
		<ul id="tesacherTableView" class="mui-table-view">
			<li class="mui-table-view-cell mui-checkbox mui-media mui-left course-cell hide-checkbox">
				<input name="checkbox" type="checkbox" class="course-checkbox">
				<a href="javascript:;">
					<p class="user-name">胡宗宪</p>
				</a>
			</li>
		</ul>
		<div class="noSign" hidden="hidden" id="noData">
			<img src="../../image/icon_no_data.png" width="60%">
			<p class="font16 top_15 base_dark_grey" >
				您还没有添加人员哦
				<br>
				赶紧去添加吧~
			</p>
			<button type="button" class="mui-btn add-btn" onclick="onSelectCourseClick()">
				＋添加人员
			</button>
		</div>
		<div class="loadFailure" hidden="hidden" id="noNet">
			<img src="../../image/icon_img01.png" width="60%">
			<p class="" >
				数据加载失败
			</p>
			<p>
				请检查您的网络
			</p>
			<button type="button" class="mui-btn mui-btn-outlined" onclick="refreshData()">
				重新加载
			</button>
		</div>
		<div class="blank-div" hidden="hidden">
		</div>
		<div class="bottom-div" hidden="hidden">
			<div class="bottom-right-div" onclick="removeCourseClick()">
				删除
			</div>
			<div class="bottom-left-div">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-checkbox mui-media mui-left bottom-checkbox">
						<input id="all_select_input" type="checkbox" onclick="allSelect()">
						全选
					</li>
				</ul>
			</div>
		</div>
		<div id="offlineAlert" class="weui_dialog_confirm" style="display: none;">
            <div class="weui_mask"></div>
            <div class="weui_dialog">
                <div class="weui_dialog_hd">
                    <strong class="weui_dialog_title">确定是否删除这<span id="selected_num">0</span>名人员？</strong>
                </div>
                <div class="weui_dialog_bd"></div>
                <div class="weui_dialog_ft">
                    <a onclick="cleanCancel()" href="#" class="weui_btn_dialog default">取消</a>
                    <a onclick="cleanConfirm()" href="#" class="weui_btn_dialog primary"  style="color:#18b4ed">确定</a>
                </div>
            </div>
        </div>
	</body>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript">
		var page = 1;
		var rows = 10;
		var dropRefreshCount = 0;
		var userArr = new Array();
		var oneWeek = 7 * 24 * 60 * 60 * 1000;
		var firstLoad = true;
		var isEdit = false;//是否是编辑状态
		var selectedUserArr = new Array();
		var selectedStuArr = new Array();
		var selectedTeacherIds = new Array();
		var isAllSelect = false;//是否全选
		var userType = 1;//学生
		apiready = function(){
		    setupNotifi();
		    prepareData();
		}
		function prepareData(){
			userType = api.pageParam.type;
			if (userType == 1) {//学生
				userArr = api.pageParam.teamStuArr;
				setupStudentList();
			}else{//老师
				loadNewData();
				setRefreshHeader();
				// setPullUpRefresh();
			}
		}
		function setupStudentList(){
			if (userArr != null && userArr.constructor == Array && userArr.length > 0) {
				var courseHtmlString = new String();
				for (var i = 0; i < userArr.length; i++) {
					var courseData = userArr[i];
					courseHtmlString += courseHtmlWithData(courseData, i);
				}
				$('#tesacherTableView').html(courseHtmlString);
				api.sendEvent({//显示编辑按钮
				    name: 'setupUserEditShowOrHideNotifi',
				    extra: {
				    	editStatus : 1
				    }
				});
				$('#noData').hide();
				$('#noNet').hide();
			}else{
				api.sendEvent({//隐藏编辑按钮
				    name: 'setupUserEditShowOrHideNotifi',
				    extra: {
				    	editStatus : 0
				    }
				});
				$('#tesacherTableView').html('');
				$('#noData').show();
				$('#noNet').hide();
			}
		}
		function removeCourseClick(){
			if (userType == 1) {//学生
				removeStu();
			}else{//老师
				removeTeacher();
			}
		}
		//删除知道教师
		function removeTeacher(){
			selectedUserArr = new Array();
			selectedTeacherIds = new Array();
			selectedStuArr = new Array();
			$("[name='checkbox']").each(function(){
				if ($(this).is(":checked") == true){//选中的
					var index = $(this).attr('index');
					var userData = userArr[parseInt(index)];
					var teacherid = userData.teacherid;
					var uid = userData.uid;
					var selectedUser = {
						teacherid : teacherid,
						uid : uid,
						index : index
					};
					selectedUserArr.push(selectedUser);
					selectedTeacherIds.push(teacherid);
				}
			});
			var selectNum = selectedUserArr.length;
			if (selectNum == 0) {
				api.toast({
				    msg: '请选择要删除的人员'
				});
				return;
			}
			$('#selected_num').text(selectNum);
			$('#offlineAlert').show();
		}
		//删除小组学生
		function removeStu(){
			selectedUserArr = new Array();
			$("[name='checkbox']").each(function(){
				if ($(this).is(":checked") == true){//选中的
					var index = $(this).attr('index');
					var userData = userArr[parseInt(index)];
					var blocuid = userData.blocuid;
					var uid = userData.uid;
					var selectedUser = {
						blocuid : blocuid,
						uid : uid,
						index : index
					};
					selectedUserArr.push(selectedUser);
					selectedStuArr.push({
						blocuid : blocuid,
						uid : uid
					});
				}
			});
			var selectNum = selectedUserArr.length;
			if (selectNum == 0) {
				api.toast({
				    msg: '请选择要删除的人员'
				});
				return;
			}
			$('#selected_num').text(selectNum);
			$('#offlineAlert').show();
		}
		//取消
		function cleanCancel(){
			$('#offlineAlert').hide();
		}
		//确认删除
		function cleanConfirm(){
			$('#offlineAlert').hide();
			var param;
			var urlString;
			if (userType == 1) {//学生
				param = {
					uid : $api.getStorage('cfnetppuid'),
					jid : $api.getStorage('cfnetppjxid'),
					pid : api.pageParam.pid,
					tid : api.pageParam.tid,
					students : selectedStuArr
				};
				urlString = url_planTeamDelStu;
			}else{
				var ids = selectedTeacherIds.join(",");
				param = {
					ids : ids
				};
				urlString = url_planCourseDelTeacher;
			}
			api.showProgress({
			    style: 'default',
			    animationType: 'fade',
			    title: '',
			    text: '删除中...',
			    modal: true
			});
			cfnetppPOST(urlString, param, false, function(data, status){
				api.hideProgress();
				if (status == 'success') {
					if (data.code == 200) {
						api.toast({
						    msg: '删除成功'
						});
						isEdit = false;
						setupCurrentUserArr();
						deleteTeamUser();
						clearCourseSelectStatus();
						selectedUserArr = new Array();
						selectedStuArr = new Array();
						selectedTeacherIds = new Array();
					    $(".course-cell").addClass("hide-checkbox");
					    $(".bottom-div").hide();
					    $(".blank-div").hide();
					    api.sendEvent({
					        name: 'showTeamStuEditBtnNotifi'
					    });
					}else{
						api.toast({
						    msg: '删除失败，请重试'
						});
					}
				}else{
					api.toast({
					    msg: '删除失败，请重试'
					});
				}
			});
		}
		function setupCurrentUserArr(){
			for (var i = 0; i < selectedUserArr.length; i++) {
				var index = selectedUserArr[i].index;
				index -= i;//每删除一次，数组长度就变化一次，相应的下标也应该减小
				// alert('index:'+index+'\n'+'删除前:'+JSON.stringify(userArr));
				userArr.splice(index,1);
				// alert('删除后:'+JSON.stringify(userArr));
			}
			api.sendEvent({
		        name: 'delUserSuccessNotifi',
		        extra: {
		            stuArr: userArr
		        }
		    });
		}
		//删除人员cell
		function deleteTeamUser(){
			if (userType == 1) {//删除学生
				// for (var i = 0; i < selectedUserArr.length; i++) {
				// 	var userData = selectedUserArr[i];
				// 	var userBlocuid = userData.blocuid;
				// 	$('#'+userBlocuid).remove();
				// }
				setupStudentList();
			}else{//删除老师
				// for (var i = 0; i < selectedUserArr.length; i++) {
				// 	var userData = selectedUserArr[i];
				// 	var userUid = userData.uid;
				// 	$('#'+userUid).remove();
				// }
				loadNewData();
			}
			if ($('#tesacherTableView').html() == '') {
				$('#noData').show();
			}else{
				api.sendEvent({
				    name: 'showCurrentEditBtnNotifi'
				});
			}
		}
		function setupCheckboxClick(){
			$('.course-checkbox').unbind('click');
			$('.course-checkbox').on('click', function(){
				if ($(this).is(":checked") == false) {
					$("#all_select_input").removeAttr("checked");
					isAllSelect = false;
				}
			});
		}
		//清空选中状态
		function clearCourseSelectStatus(){
			$("[name='checkbox']").removeAttr("checked");
			$("#all_select_input").removeAttr("checked");//清空时，使用type连全选一起清空
			selectedUserArr = new Array();
			isAllSelect = false;
		}
		function allSelect(){
			if (isAllSelect == true) {
				clearCourseSelectStatus();
			}else{
				isAllSelect = true;
				$("[name='checkbox']").prop('checked', 'true');
			}
		}
		function setupNotifi(){
			api.addEventListener({
			    name: 'editUserNotifi'
			}, function(ret, err) {
			    isEdit = true;
			    $(".course-cell").removeClass("hide-checkbox");
			    $(".bottom-div").show();
			    $(".blank-div").show();
			});
			api.addEventListener({
			    name: 'clearUserSelectStatusNotifi'
			}, function(ret, err) {
			    clearCourseSelectStatus();
			    isEdit = false;
			    $(".course-cell").addClass("hide-checkbox");
			    $(".bottom-div").hide();
			    $(".blank-div").hide();
			    $('#offlineAlert').hide();
			});
			api.addEventListener({
			    name: 'addPlanTeamStuNotifi'
			}, function(ret, err) {
			    var addStuArr = ret.value.data;
			    if (addStuArr != null && addStuArr.constructor == Array && addStuArr.length > 0) {
			    	userArr = userArr.concat(addStuArr);
			    	setupStudentList();
			    }
			});
			api.addEventListener({
			    name: 'refreshPlanCourseListNotifi'
			}, function(ret, err) {
			    loadNewData();
			});
			api.addEventListener({
			    name: 'addPlanCourseTeacherNotifi'
			}, function(ret, err) {
			    loadNewData();
			});
		}
		function loadNewData() {
			page = 1;
			loadData();
		}
		function loadMoreData() {
			page++;
			loadData();
		}
		//下拉刷新
		function setRefreshHeader() {
			api.setRefreshHeaderInfo({
				visible : true,
				bgColor : '#ccc',
				textColor : '#fff',
				textDown : '下拉刷新...',
				textUp : '松开刷新...',
				showTime : true
			}, function(ret, err) {
				loadNewData();
			});
		}
		// 上拉加载
		function setPullUpRefresh() {
			api.addEventListener({
				name : 'scrolltobottom'
			}, function(ret, err) {
				loadMoreData();
			});
		}
		function loadData(){
			if (isEdit == true) {
				api.refreshHeaderLoadDone();
				api.hideProgress();
				return;
			}
			if (firstLoad == true) {
				api.showProgress({
				    style: 'default',
				    animationType: 'fade',
				    title: '加载中...',
				    text: '',
				    modal: false
				});
				firstLoad = false;
			}
			var param = {
				pid : api.pageParam.pid,
				jid : $api.getStorage('cfnetppjxid'),
				cid : api.pageParam.cid
				// pid : 3742,
				// jid : 158,
				// cid : 14507
			};
			cfnetppPOST(url_planCourseTeacherList, param, true, function(data, status) {
				api.refreshHeaderLoadDone();
				api.hideProgress();
				if (status == 'success') {
					if (data.code == 200) {
						var courseList = data.data.teachers;
						if (courseList != null && courseList.constructor == Array && courseList.length > 0) {
							userArr = courseList;
							var courseHtmlString = new String();
							for (var i = 0; i < courseList.length; i++) {
								var courseData = courseList[i];
								courseHtmlString += teacherHtmlWithData(courseData, i);
							}
							$('#tesacherTableView').html(courseHtmlString);
							api.sendEvent({//显示编辑按钮
							    name: 'setupUserEditShowOrHideNotifi',
							    extra: {
							    	editStatus : 1
							    }
							});
							$('#noData').hide();
							$('#noNet').hide();
						}else{
							api.sendEvent({//隐藏编辑按钮
							    name: 'setupUserEditShowOrHideNotifi',
							    extra: {
							    	editStatus : 0
							    }
							});
							$('#tesacherTableView').html('');
							$('#noData').show();
							$('#noNet').hide();
						}
					} else {
						api.sendEvent({//隐藏编辑按钮
						    name: 'setupUserEditShowOrHideNotifi',
						    extra: {
						    	editStatus : 0
						    }
						});
						$('#tesacherTableView').html('');
						$('#noData').show();
						$('#noNet').hide();
					}
				} else {
					api.sendEvent({//隐藏编辑按钮
					    name: 'setupUserEditShowOrHideNotifi',
					    extra: {
					    	editStatus : 0
					    }
					});
					$('#tesacherTableView').html('');
					$('#noData').hide();
					$('#noNet').show();
				}
			});
		}
		function teacherHtmlWithData(data, index){
			return '<li id="'+data.uid+'" index="'+index+'" class="mui-table-view-cell mui-checkbox mui-media mui-left course-cell hide-checkbox">'+
				'<input index="'+index+'" name="checkbox" type="checkbox" class="course-checkbox">'+
				'<a href="javascript:;">'+
					'<p class="user-name">'+data.name+'</p>'+
				'</a>'+
			'</li>';
		}
		function courseHtmlWithData(data, index){
			return '<li id="'+data.blocuid+'" index="'+index+'" class="mui-table-view-cell mui-checkbox mui-media mui-left course-cell hide-checkbox">'+
				'<input index="'+index+'" name="checkbox" type="checkbox" class="course-checkbox">'+
				'<a href="javascript:;">'+
					'<p class="user-name">'+data.rename+'</p>'+
				'</a>'+
			'</li>';
		}
		function refreshData(){
			firstLoad = true;
			loadNewData();
		}
		function numNullStr(str){
			if (str == null || str == '' || str == undefined) {
				return 0;
			}
			return str;
		}
		function onSelectCourseClick(){
			api.openWin({useWKWebView:true,
			    name: 'StudyCreatPlan_SelectStu_Win',
			    url: 'StudyCreatPlan_SelectStu_Win.html',
			    pageParam: api.pageParam
			});
		}
	</script>
</html>